<!-- 
	장바구니 기능
	작성일 : 10월 11일 
	작성자 : 이민선 
-->
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
	#head{height:242px}
	#footer{height:100px;}
	
	/*
		장바구니 이미지
	*/
	#content{width:1100px; margin:0 auto;}
	#top_line{width:100%; margin:0 auto; height:1px; border-bottom:1px solid #bfbfbf;}	
	#box{width: 1100px; margin:0 auto; } 
	
	/*
		장바구니 테이블
	*/
	#cart{width: 1100px; margin:0 auto; }
	.cart_title{padding-top: 20px;}
	.cart_table{width: 100%; border-top: 2px solid #7e7e7e;}
	.cart_table th {padding:13px 0 8px; font-weight:normal; font-size:12px; text-align:center; color:#414141; border-bottom:1px solid #e9e9e9;}
	.cart_table td {padding:10px 0; font-weight:normal; font-size:12px; color:#333; border-bottom:1px solid #e9e9e9;}
	.cart_table td.checkbox {padding:13px 0 8px; text-align:center;}
	.cart_table td.left {font-weight:bold; text-align:left;}
	.cart_tbody{border-top: 1px solid #bfbfbf;}
	.thead{background-color:#fffbe7;}
	.total .total_left {position:relative; float:left; width:789px; padding:30px 0px 30px 0px; background-color: #c7c6c1; height: 105px;}
	.total .balance_info a {color:#fff; text-decoration:underline;}
	.total .total_right {overflow:hidden; float:right; width: 27.5%; margin:0px 8px 0px 0px; text-align: right; background-color: #c7c6c1;}
	.total .total_right th {padding-left: 50px; normal; font-size:12px; background-color: #c7c6c1;}
	.total .total_right td {padding-right:33px; text-align:right; color:#414141; line-height:30px;}
	.total .total_right .price th {padding-top:15px; border-top:1px solid #d9d9d9; font-weight:bold; font-size:16px;}
	.total .total_right .price td {padding-top:14px; border-top:1px solid #d9d9d9; font-weight:bold; font-size:16px; color:#fc6800;}
	#cart .cart_title {padding:40px 0 18px; line-height:0;}

	/*
		장바구니 버튼
	*/
	#cart .btn_box {padding:15px 0 38px;}
	#cart .btn_box p {float:left; cursor:pointer; padding-top: 10px;}
	#cart .btn_box p img {vertical-align:middle; padding-right: 5px;}
	#cart .btn_box ul {float:right; padding: 10px 10px 0 0;}
	#cart .btn_box ul li {float:left; padding-left: 5px; list-style: none;}
</style>
<title>장돌뱅이 ~대한민국 전통시장을 응원합니다~</title>
<link href="/Jangdolbaeng2/css/customer/common1.css" rel="stylesheet">
<link href="/Jangdolbaeng2/css/bootstrap.min.css" rel="stylesheet">
<link href="/Jangdolbaeng2/css/customer/common.css" rel="stylesheet">
<script src="/Jangdolbaeng2/js/jquery-1.11.1.js"></script>
<script src="/Jangdolbaeng2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	chong();
	
	//$('input:button.btn').click(change);
	
	//체크박스
	$('input:checkbox.selectAll').click(selectAll);
	
	$('input:checkbox.cb').click(function(item){
		chong();
		if(!item.checked){
			//alert($('.cb').is(':checked'));
			$('.selectAll').removeAttr('checked');
			return;
		}//if
		
		/* var realCart = item.realCartSize;
		alert(realCart);
		
		if( == realCartSize){
			$('.selectAll').attr('checked');	
		}	 */
		
	/* 	var sum = 0;
		var count = item.checkbox.length;
		alert(count); */
	});//click

});

//총합계
function chong(){
	var sum = 0;

	$("input:checkbox.cb:checked").each(function(index){
		sum += parseInt($(this).attr('sum-data'));		
	});		
			
	$("#total").html(sum + "원");	

	charge(sum);
	
}

//배송료 처리
function charge(sum){
	//alert(sum);
	 var deliveryCharge = 0;
	 
	 if(sum < 30000){
		 deliveryCharge = 2500;
		 $('#charge').html(deliveryCharge + "원");
	 } else {
		 deliveryCharge = 0 ;
		 $('#charge').html(deliveryCharge + "원");
	 }
	 totalMoney(sum, deliveryCharge);
}

//총 결제 금액
function totalMoney(sum, deliveryCharge){
	//alert(deliveryCharge);
	//alert(sum);
	var result = 0;
	result = sum + parseInt(deliveryCharge);
	//alert(result);
	$('#totalMoney').html(result + '원');
}

function warn(){
	alert("장바구니에 상품을 넣어주세요");
}

//수량 변경
function change(product_seq) {
	//alert(product_seq);
	var quantity = $('#quantity' + product_seq).val();
	//alert(quantity);
	
	$.ajax({
		url: '/Jangdolbaeng2/customer/updateQuantity.action',
		type: 'POST',
		dataType: 'json',
		data: {quantity: quantity, product_seq: product_seq},
		success: oK
	 });
	/* 	var id = '#'+$(this).attr("data-id");
	var quantity = $(id).val();
	var product_seq = $(this).attr("data-num");

	//alert(quantity);
	//alert(product_seq);
	
	 $.ajax({
		url: '/Jangdolbaeng2/customer/updatequantity.action',
		type: 'POST',
		dataType: 'json',
		data: {quantity: quantity, product_seq: product_seq},
		success: oK
	 }); */
}
function oK() {
	//alert("성공");
	location.href="/Jangdolbaeng2/customer/goCart.action";
}

/* //체크박스 전체선택
$(document).ready(function(){
   $('.selectAll').click(function(){
      $('.cb').prop('checked', this.checked);
      //alert("쳌!");
   });
}); */

//체크박스 전체선택
function selectAll(){
	$('.cb').prop('checked', this.checked);
	chong();
	//alert("들어옴");
}
//체크박스 선택 삭제
function cbDelete(){
	if( $("input:checkbox.cb:checked").val() == null){
	      alert("삭제 상품을 선택 하십시오.");
	      return;
	}
	//alert("good");
	var array = new Array();
	$("input:checkbox.cb:checked").each(function(index){
		//alert($(this).val());
		array[index]=$(this).val();
	});	
	
	//return array;
	//alert(array);
	
	/*
		data배열값 전송!!
		ajax를 쓰다가 배열타입의 변수를 서버에 전송해야 하는 상황발생!
		나는 그래서 일반 변수 넘겨 주듯이 넘겨주었다.
		근데 이게 왠걸...
		서버에서는 null 값만 계속 받는다
		뭐 별에 별짓을 다 해도 null 만 찍힌다
		아놔........
		이리저리 알아보다가 매우 쉽게 해결했다. 
		jQuery.ajaxSettings.traditional = true;
		$.ajax({
		...
		...
		}); 
		ajax 세팅을 해주는것 같다.
		jQuery.param() 메소드의 중첩 매개변수 직렬화 부분이 변경되면서 발생되는 문제였던거 같다.
		그래서 기존의 직렬화 방식을 사용하기 위해 ajax 메소드 위에 라인 한줄 추가해줌으로써 해결했다.
		그런데 기존의 직렬화 방식을 권장하지는 않는단다.
		* 주의할 점

		ajax에서 배열 넘길 때 data: {"value[]" : a},   
		이렇게 [] 표시를 붙이는 경우가 있는데, 그것을 붙이면 안.된.다.
	*/
	jQuery.ajaxSettings.traditional = true;
	$.ajax({
		url: '/Jangdolbaeng2/customer/deleteCart.action',
		type: 'POST',
		dataType: 'json',
		data: {product_seqList: array},
		success: ok
	});  
}//cbDelete()
function ok(){
	confirm("삭제하시겠습니까?");
	location.href="/Jangdolbaeng2/customer/goCart.action";
}

//선택상품 주문
function choiceOrder(){
	if( $("input:checkbox.cb:checked").val() == null){
	      alert("주문 할 상품을 선택 하십시오.");
	      return;
	}
	//alert("good");

	var array = new Array();
	var quantity = new Array();
	$("input:checkbox.cb:checked").each(function(index){
		//alert($(this).val());
		array[index]=$(this).val();
		
		quantity[index] = $('#quantity' + $(this).val()).val();
	});	

	//alert(quantity + " 수량 ");
	//alert(array + "product_seq");

	jQuery.ajaxSettings.traditional = true;
	$.ajax({
		url: '/Jangdolbaeng2/customer/choiceOrder.action',
		type: 'POST',
		dataType: 'json',
		data: {product_seqList: array,
		       quantityList: quantity	
		},
		success: good
	});  
}
function good(json){
	//alert("ok");
	//alert(json.product_seqList);
	//alert(json.quantityList);
	
	location.href="/Jangdolbaeng2/customer/order.action";
}
function goBacktoTheShopping(){
	history.go(-1);
}

</script>
</head>
<body>
<div id="head">
	<%@ include file="main_header.jsp" %>
</div>

<!-- 
	장바구니 이미지
 -->
<div id="box">
	<div style="padding: 20px 0 10px 50px;">
		<div id="content">
			<table>
				<tr>
					<td style="padding-right: 340px;">
						<span style="font-size: 35pt; font-family: nanumBB;">CART</span>
					</td>
					<td style="padding-right: 15px;">
						<h1><span class="glyphicon glyphicon-briefcase" style="color: #FF6002;"></span></h1>
					</td>
					<td style="padding-right: 20px;">
						<span style="font-family: fantasy;">STEP<span style="color: #FF6002;">&nbsp;01</span></span><br>
						<h4><span>장바구니</span></h4>
					</td>
					<td style="padding-right: 20px;">
						<h1><span class="glyphicon glyphicon-chevron-right" style="color: #b7b7b7;"></span></h1>
					</td>
					<td style="padding-right: 20px;">
						<h1><span class="glyphicon glyphicon-credit-card" style="color: #b7b7b7;"></span></h1>
					</td>
					<td style="padding-right: 20px;">
						<span style="font-family: fantasy; color: #b7b7b7;">STEP<span style="color: #b7b7b7;">&nbsp;02</span></span><br>
						<h4><span style="color: #b7b7b7;">주문/결제</span></h4>
					</td>
					<td style="padding-right: 20px;">
						<h1><span class="glyphicon glyphicon-chevron-right" style="color: #b7b7b7;"></span></h1>
					</td>
					<td style="padding-right: 20px;">
						<h1><span class="glyphicon glyphicon-gift" style="color: #b7b7b7;"></span></h1>
					</td>
					<td style="padding-right: 20px;">
						<span style="font-family: fantasy; color: #b7b7b7;">STEP<span style="color: #b7b7b7;">&nbsp;03</span></span><br>
						<h4><span style="color: #b7b7b7;">주문완료</span></h4>
					</td>
				</tr>	
			</table>
		</div>
	</div>
	<div id="top_line"></div>
</div>

<div id="cart">
	<p class="cart_title">
		<img alt="cart" src="../img/customer/cart_title1.gif">
	</p>
	<!-- 
		장바구니 테이블
 	-->
 	<!-- 장바구니에 상품이 있을 때 -->
 	<s:if test="realCart.size() != 0">
		<table class="cart_table" >
			<thead class="thead">
				<tr>
					<th style="width: 10%;">
						<input type="checkbox" name="all" class="selectAll" id="selectAll" checked>
					</th>
					<th colspan="2">상품명</th>
					<th style="width: 12%">상품가격</th>
					<th style="width: 10%">수량</th>
					<th style="width: 13%">합계</th>
				</tr>
			</thead>
			<s:iterator value="realCart" status="stat">
				<tbody>
					<tr>
						<td class="checkbox" style="padding-left: 25px;">
							<input type="checkbox" class="cb" value="<s:property value="product_seq"/>" sum-data="<s:property value="product_price * quantity"/>" checked>
						</td>
						<td width="60px;">
							<a href="/Jangdolbaeng2/product/goProduct_detail.action?product_seq=<s:property value="product_seq"/>">
								<img src="data:image/jpeg;base64, <s:property value="product_image1"/>" width="50px"/>
							</a>
						</td>
						<td align="left">&nbsp;&nbsp;&nbsp;
							<a href="/Jangdolbaeng2/product/goProduct_detail.action?product_seq=<s:property value="product_seq"/>"><s:property value="product_name"/></a>
						</td>
						<td align="center"><s:property value="product_price"/>원</td>
						<td align="center">
							<%-- <input type="text" class="quantity" value="<s:property value="quantity"/>" id="quantity<s:property value="#stat.index"/>" size="2"><br><br> --%>
							<%-- <input type="button" class="btn" value="변경" style="background-color: white; border: solid; font-weight: bold; border-width: 1px;" data-id="quantity<s:property value="#stat.index"/>" id="button<s:property value="#stat.index"/>" data-num="<s:property value="product_seq"/>"> --%>
							<input type="text" class="quantity" value="<s:property value="quantity"/>" id="quantity<s:property value="product_seq"/>" size="2"><br><br>
							<input type="button" class="btn" value="변경" onclick="change(<s:property value="product_seq"/>)" id="button">
						</td>
						<td align="center">
							<input type="hidden" value="<s:property value="product_price * quantity"/>" id="<s:property value="#stat.index"/>"/>
							<s:property value="product_price * quantity"/>원
						</td>
					</tr>
				</tbody>
			</s:iterator>
		</table>
			
			<div class="total">
				<div class="total_left"></div>
				<div class="balance_info"><a></a></div>
				<table class="total_right" cellspacing="0" cellpadding="0">
					<tr>
						<th>주문수량합계 :&nbsp;</th>
						<td id="total"></td>
					</tr>
					<tr>
						<th>배송료 :&nbsp;</th>
						<td id="charge"></td>
					</tr>
					<tr class="price">
						<th>총 결제금액 :&nbsp;</th>
						<td id="totalMoney"></td>
					</tr>
				</table>
			</div>
		</s:if>	
		
		<!-- 장바구니에 상품이 없을 때 -->
		<s:else>
			<table class="cart_table" >
				<thead class="thead">
					<tr>
						<th style="width: 10%;">
							<input type="checkbox"><!-- onclick / 컬럼 체크 박스 누르면 다 선택되도록 -->
						</th>
						<th colspan="2">상품명</th>
						<th style="width: 12%">상품가격</th>
						<th style="width: 10%">수량</th>
						<th style="width: 13%">합계</th>
					</tr>
				</thead>
				<tbody>
					<tr>
					    <th colspan="7" style="height:200px; background-color: #fffbe7;">장바구니가 비었습니다.</th>
					</tr>
				</tbody>	
			</table>
			<div class="total">
				<div class="total_left"></div>
				<div class="balance_info"><a></a></div>
				<table class="total_right" cellspacing="0" cellpadding="0">
					<tr>
						<th>주문수량합계 : </th>
						<td>0원</td>
					</tr>
					<tr>
						<th>배송료 : </th>
						<td>0원</td>
					</tr>
					<tr class="price">
						<th>총 결제금액 : </th>
						<td>0원</td>
					</tr>
				</table>
			</div>
		</s:else>
	
	<!-- 
		장바구니 버튼
	 -->
	<div class="btn_box">
		<p>
			<a href="javascript:cbDelete()">
				<img alt="선택상품 삭제" src="../img/customer/btn_cart1.gif">
			</a>
		<!-- 	<a href="javascript:choiceOrder()">
				<img alt="선택상품  주문" src="../img/customer/btn_cart2.gif">
			</a> -->
		</p>
		<ul>
			<li>
			<!-- onclick 쇼핑계속하기 액션 하기 10/17 -->
				<a href="javascript:goBacktoTheShopping();">
					<img alt="쇼핑계속하기" src="../img/customer/btn_cart5.gif">
				</a>
			</li>
			<s:if test="realCart.size() != 0">
				<li>
					<!-- <a href="/Jangdolbaeng2/customer/order.action">
						<img alt="주문하기" src="../img/customer/btn_cart6.gif">
						</a> 
					-->
					<a href="javascript:choiceOrder()">
						<img alt="주문하기" src="../img/customer/btn_cart6.gif">
					</a>
				</li>
			</s:if>
			<s:else>
				<li>
					<a href="javascript:warn()">
						<img alt="주문하기" src="../img/customer/btn_cart6.gif">
					</a>
				</li>
			</s:else>
		</ul>
	</div>
</div>

<div>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="footer">
	<%@ include file="main_footer.jsp" %>
</div>
</body>
</html>